<template>
  <section ref="wapper" class="v-wapper" :class="[ _focus&&'focus', drag_start_&&'start',in_&&'in',out_&&'out',!isMoveLeft_&&'left']" @click="focus()">
    <section class="inner">
      <component :is="_target" ref="widget" :option="_option" />
      <div class="mask" />
      <div class="active" />
    </section>
  </section>
</template>
<script>
import VField from '../../form/field'
export default {
  name: 'VWapper',
  components: { VField },
  props: {
    id: {
      type: [String, Number],
      default: ''
    },
    option: {
      type: Object,
      default: () => { }
    }
  },
  inject: ['focusId', 'dragState', 'getPortListFun', 'getListItemInfo'],
  data() {
    return {
      drag_start_: false,
      darg_enter_: false,
      dragging_: false,
      isMoveLeft_: false,
      in_: true,
      out_: false
    }
  },
  computed: {
    _target() {
      return this.option.target
    },
    _option() {
      return this.option.option
    },
    _focusId() {
      return this.focusId()
    },
    _dragState() {
      return this.dragState()
    },
    _focus() {
      return this.id == this._focusId
    }
  },
  methods: {
    async focus() {
      const { id } = this
      const { name } = this.option
      if (name === 'empty') {
        return
      }
      await this.getPortListFun(this.getListItemInfo(name).id)
      this.dispatch_event('focus-wapper', { id, name })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/position.scss';
@import '@/styles/utility/shadow.scss';
@import '@/styles/utility/center.scss';
@import '@/styles/utility/iconbtn.scss';
@import '@/styles/utility/rem.scss';
.v-wapper {
  position: relative;
  transition: all ease-in 0.3s;
  transform: scale(0.2);
  opacity: 0;
  &::before {
    content: '';
    display: block;
    @include absolute();
    border: 1px dashed transparent;
    pointer-events: none;
    transition: all ease-in 0.3s;
    border-radius: 3px;
  }
  .mask {
    @include absolute();
    z-index: 9;
  }
  .active {
    @include absolute();
    pointer-events: none;
    user-select: none;
    display: none;
    border: 1px solid $a1;
    border-radius: 3px;
    z-index: 3;
  }
  .remove {
    @include absolute(0, 0, none, none);
    display: none;
    z-index: 9;
    .button {
      @include iconbtn();
    }
  }
  &.focus {
    .active {
      display: block;
    }
  }
  &.in {
    transform: scale(1);
    opacity: 1;
  }
  &.out {
    transition: all ease-in 0.4s;
    opacity: 0.5;
    transform: scale(0.5);
  }

  &:hover {
    z-index: 9;
    cursor: move;
    &::before {
      border: 1px dashed $a1;
    }
    .remove {
      display: block;
    }
  }
}
</style>
